<template>
  <div class="user-setting">
    <basic-container>
      <el-tabs tab-position="left"
               stretch
               style="height: 400px;">
        <el-tab-pane label="安全设置">
          <div class="user-setting__main">
            <div class="user-setting__title">安全设置</div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-user"></i>
                  账号安全
                </p>
                <p class="subtitle">更改当前账号密码</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="updatePassword">修改</el-button>
              </div>
            </div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-mobile-phone"></i>
                  绑定手机
                </p>
                <p class="subtitle">设置您的绑定手机号码</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="isBindPhone=true">修改</el-button>
              </div>
            </div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-message"></i>
                  绑定邮箱
                </p>
                <p class="subtitle">设置您的绑定邮箱</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="isBindEmail=true">修改</el-button>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <!--        <el-tab-pane label="通知设置">-->
        <!--          <div class="user-setting__main">-->
        <!--            <div class="user-setting__title">通知设置</div>-->
        <!--            <div class="user-setting__item">-->
        <!--              <div class="user-setting__meta">-->
        <!--                <p class="title">-->
        <!--                  <i class="el-icon-document"></i>-->
        <!--                  系统消息-->
        <!--                </p>-->
        <!--                <p class="subtitle">系统性的通知或者更新消息</p>-->
        <!--              </div>-->
        <!--              <div class="user-setting__menu">-->
        <!--                <el-switch v-model="value">-->
        <!--                </el-switch>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="user-setting__item">-->
        <!--              <div class="user-setting__meta">-->
        <!--                <p class="title">-->
        <!--                  <i class="el-icon-user"></i>-->
        <!--                  帐号消息-->
        <!--                </p>-->
        <!--                <p class="subtitle">帐号变更的通知消息</p>-->
        <!--              </div>-->
        <!--              <div class="user-setting__menu">-->
        <!--                <el-switch v-model="value">-->
        <!--                </el-switch>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </basic-container>

    <el-dialog custom-class="avue-dialog" class="avue-dialog" close-on-press-escape append-to-body :show-close="true" :close-on-click-modal="false" title="绑定手机" :visible.sync="isBindPhone" width="30%">
      <el-form :model="phone" status-icon :rules="rulesPhone" ref="phone" size="small" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input @keyup.enter.native="handlePhone" type="text" v-model="phone.phone" autocomplete="off" :placeholder="$t('login.phone')" maxlength="11"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input size="small"
                    @keyup.enter.native="handlePhone"
                    v-model="phone.code"
                    auto-complete="off"
                    :placeholder="$t('login.code')">
            <template slot="append">
              <el-button @click="handleSend"
                         class="avue-login__send"
                         :class="[{textMsg:msgKey}]">{{msgText}}</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="avue-dialog__footer">
        <el-button @click="isBindPhone=false">取消</el-button>
        <el-button type="primary" @click="handlePhone">提交</el-button>
    </span>
    </el-dialog>

    <el-dialog custom-class="avue-dialog" class="avue-dialog" close-on-press-escape append-to-body :show-close="true" :close-on-click-modal="false" title="绑定邮箱" :visible.sync="isBindEmail" width="30%">
      <el-form :model="email" status-icon :rules="rulesEmail" ref="email" size="small" label-width="100px">
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="email.email" placeholder="请输入 邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input size="small"
                    @keyup.enter.native="handleEmail"
                    v-model="email.code"
                    auto-complete="off"
                    :placeholder="$t('login.code')">
            <template slot="append">
              <el-button @click="handleSendEmail"
                         class="avue-login__send"
                         :class="[{textMsg:msgKey}]">{{msgText}}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="avue-dialog__footer">
        <el-button @click="isBindEmail=false">取消</el-button>
        <el-button type="primary" @click="handleEmail">提交</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  validMobile, validEmail
} from '@/util/validate';
import {sendCode, updatePhone, sendEmailCode, updateEmail} from '@/api/user'
import {mapGetters} from "vuex";
export default {
  data () {
    return {
      value: true,
      // option2: {
      //   time: 60,
      //   codeType: 'phone',
      //   column: {
      //     username: {
      //       label: '手机号',
      //       prefixIcon: 'el-icon-mobile-phone',
      //       placeholder: '手机号/邮箱/用户名',
      //       autocomplete: 'off',
      //       rules: { required: true, message: '请输入手机号', trigger: 'blur' }
      //     },
      //     password: {
      //       hide: true,
      //     },
      //     code: {
      //       label: '验证码',
      //       autocomplete: 'off',
      //       rules: { required: true, message: '请输验证码', trigger: 'blur' }
      //     }
      //   },
      //   button : [
      //     {
      //       text: 'asd'
      //     }
      //   ]
      // },
      msgText: "",
      msgTime: "",
      msgKey: false,
      phone: {
        phone: '',
        code: '',
      },
      rulesPhone: {
        phone: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          }
          ,{
            validator: validMobile,
            trigger: 'change',
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }
        ]
      },
      email: {
        email: '',
        msgId: '',
        code: '',
      },
      rulesEmail: {
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          }
          ,{
            validator: validEmail,
            trigger: 'change',
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }
        ]
      },
      isBindPhone: false,
      isBindEmail: false
    }
  },
  computed: {
    ...mapGetters(["tagWel", "website"]),
    config () {
      return {
        MSGINIT: this.$t("login.msgText"),
        MSGSCUCCESS: this.$t("login.msgSuccess"),
        MSGTIME: 60
      };
    }
  },
  created() {
    this.msgText = this.config.MSGINIT;
    this.msgTime = this.config.MSGTIME;
  },
  methods: {
    updatePassword() {
      this.$store.commit('SET_ISUPDATEPASSWORD', true);
    },
    handleSend () {
      if (this.msgKey) return;

      const send = ()=>{
        sendCode(this.phone.phone).then(() => {
          this.$message.success('验证码发送成功')
          this.msgText = this.msgTime + this.config.MSGSCUCCESS;
          this.msgKey = true;
          const time = setInterval(() => {
            this.msgTime--;
            this.msgText = this.msgTime + this.config.MSGSCUCCESS;
            if (this.msgTime === 0) {
              this.msgTime = this.config.MSGTIME;
              this.msgText = this.config.MSGINIT;
              this.msgKey = false;
              clearInterval(time);
            }
          }, 1000);
        });
      }

      this.$refs.phone.validateField("phone", valid => {
        if (valid !== "") {
          return;
        }

        if (this.phone.phone) {
          send();
        }

      })

    },
    handlePhone(){
      this.$refs.phone.validate((valid) => {
        if (valid) {
          updatePhone({
            phone: this.phone.phone,
            phoneCode: this.phone.code
          }).then(res=>{
            if (res.data.status){
              this.isBindPhone=false;
              this.phone = {
                phone: '',
                code: '',
              };

              this.$message.success("设置成功");
            } else {
              this.$message.error("设置失败");
            }
          })
        }
      });
    },
    handleSendEmail  () {
      if (this.msgKey) return;

      const send = ()=>{
        sendEmailCode(this.email.email).then(res => {
          this.email.msgId = res.data.data;
          this.$message.success('验证码发送成功')
          this.msgText = this.msgTime + this.config.MSGSCUCCESS;
          this.msgKey = true;
          const time = setInterval(() => {
            this.msgTime--;
            this.msgText = this.msgTime + this.config.MSGSCUCCESS;
            if (this.msgTime === 0) {
              this.msgTime = this.config.MSGTIME;
              this.msgText = this.config.MSGINIT;
              this.msgKey = false;
              clearInterval(time);
            }
          }, 1000);
        });
      }

      this.$refs.email.validateField("email", valid => {
        if (valid !== "") {
          return;
        }

        if (this.email.email) {
          send();
        }

      })

    },
    handleEmail() {
      this.$refs.email.validate((valid) => {
        if (valid) {
          updateEmail({
            email: this.email.email,
            msgId: this.email.msgId,
            emailCode: this.email.code
          }).then(res=>{
            if (res.data.status){
              this.isBindEmail=false;
              this.email = {
                email: '',
                msgId: '',
                code: '',
              };

              this.$message.success("设置成功");
            } else {
              this.$message.error("设置失败");
            }
          })
        }
      });

    }
  }
}
</script>

<style lang="scss">
.user-setting {
  &__main {
    padding: 8px 40px;
  }
  &__item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  &__title {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 12px;
  }
  &__meta {
    flex: 1;
    .title {
      margin: 6px 0;
      font-weight: 700;
      font-size: 14px;
    }
    .subtitle {
      margin: 8px 0;
      font-size: 14px;
      color: #555;
    }
  }
}
</style>
